<template>
<div id="app">
  <h1>hello world</h1>
        <el-row :gutter="20">
<!--            <el-col :span="4">-->
<!--                <div>-->
<!--                    <el-tag>标签</el-tag>-->
<!--                    <hr />-->
<!--                    <el-tag type="success">成功</el-tag>-->
<!--                    <hr />-->
<!--                    <el-tag type="warning">警告</el-tag>-->
<!--                    <hr />-->
<!--                </div>-->
<!--            </el-col>-->
            <el-col :span="20" :offset="2">
                <div class="grid-content bg-purple"></div>
                <div>
                    <el-table :data="tableData" style="width: 100%" highlight-current-row @row-click="rowClick"
                        @cell-click="cellClick" row-key="id" :expand-row-keys="expands">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="ID:">
                                        <span>{{ props.row.id }}</span>
                                    </el-form-item>
                                    <el-form-item label="姓名:">
                                        <span>{{ props.row.name }}</span>
                                    </el-form-item>
                                    <el-form-item label="日期:">
                                        <span>{{ props.row.date }}</span>
                                    </el-form-item>


                                    <el-form-item label="家庭地址:">
                                        <span>{{ props.row.address }}</span>
                                    </el-form-item>
                                    <el-form-item label="商品描述:">
                                        <span>{{ props.row.type }}</span>
                                    </el-form-item>
                                    <el-form-item label="tag:">
                                        <span>{{ props.row.value }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" :index="indexMethod">
                        </el-table-column>
                        <!-- <el-table-column prop="id" label="ID" width="80">
                        </el-table-column> -->
                        <el-table-column prop="生产日期" label="日期" width="180">
                        </el-table-column>
                        <el-table-column prop="型号" label="型号" width="180">
                        </el-table-column>
                        <el-table-column prop="存放位置" label="存放位置">
                        </el-table-column>

                        <el-table-column prop="状态" label="状态" :filters="filterTagArray" :filter-method="filterTag">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.type">{{scope.row.状态}}</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="2">

            </el-col>
        </el-row>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: "AssetTable",
  data(){
    return{
      message: 'Hello Vue!',
      filterTagArray: [{ text: '成功人士', value: '成功' }, { text: '失败败类', value: '失败' }],
      tableData: [{
                    date: '2016-05-02',
                    name: '张三',
                    address: '上海市普陀区金沙江路 1518 弄',
                    value: '成功',
                    type: 'success',
                    id:1,
                }, {
                    date: '2016-05-04',
                    name: '李四',
                    address: '上海市普陀区金沙江路 1517 弄',
                    value: '成功',
                    type: 'success',
                    id:2,
                }, {
                    date: '2016-05-01',
                    name: '王麻子',
                    address: '上海市普陀区金沙江路 1519 弄',
                    value: '失败',
                    type: 'warning',
                    id:3,
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                    type: "primary",
                    value: '失败',
                    id:55,

                }],
                // 要展开的行，数值的元素是row的key值
      expands: []
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
                getData(){
                  this.$axios.get('/api/search/').then(res=>{
                  console.log(res.data)
                    this.tableData = res.data.data
                  })
                },
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                },
                filterTag(value, row) {

                    return row.value === value
                },
                filterHandler(value, row, column) {
                    const property = column['property'];
                    return row[property] === value;
                },
                indexMethod(index) {
                    console.log('index', index);
                    return index + 1;
                },
                openDetails(row, column, event) {
                    console.log(row);
                    this.$message({
                        message: '恭喜:\t' + row.name + '\n \t 他的地址是' + row.address,
                        type: 'success'
                    });

                },
                cellClick(row, column, cell, event) {
                    console.log(cell);
                    let content = $(cell); //[object HTMLTableCellElement] 转jq对象    ==== cell =>dom对象
                    let value = content.children()[0].innerHTML; //获取到单元格的文本内容
                    this.$notify({
                        title: value,
                        message: '这是一条带有偏移的提示消息',
                        offset: 100
                    });
                },
                rowClick(row, event, column) {
                    Array.prototype.remove = function (val) {
                        let index = this.indexOf(val);
                        if (index > -1) {
                            this.splice(index, 1);
                        }
                    };

                    if (this.expands.indexOf(row.id) < 0) {
                        this.expands = [];
                        this.expands.push(row.id);
                    } else {
                        this.expands.remove(row.id);
                    }

                }

            }

}
</script>

<style scoped>

</style>
